<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sugar</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box_vw {
      width: 50vw;
      height: 50vw;
      background-color: #f90;
    }

    .box_px {
      width: 187.5px;
      height: 187.5px;
      background-color: #9f0;
    }
  </style>
</head>

<!-- 
  在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下，我们遵守两个基本原则：
    1. 对于设计稿的尺寸转换为 vw 单位。
    2. 无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位。
-->

<body>
  <div class="box_vw">
    盒子vw
  </div>
  <div class="box_px">
    盒子px
  </div>
</body>

</html>